import { message } from "antd";
import { useCallback, useEffect, useState } from "react";
import { getReportMgData } from "../../api";

const MengangData = () => {
    const [countlist, setCountList] = useState<{ entryCars: number, insideCars: number, outputCars: number }>()
    const countFun = useCallback(async () => {
        const { code, msg, data } = await getReportMgData() as {
            code: number, msg: string,
            data: { entryCars: number, insideCars: number, outputCars: number }
        };
        if (code === 20000) {
            setCountList(data)
        } else {
            message.error(msg);
        }
    }, [])
    useEffect(() => {
        countFun()
    }, [countFun])
    return (
        <div className="mengang">
            <div className="mengang-title">
                门岗数据
            </div>
            <div className="mengang-content">
                <div className="mengang-item">
                    <div className="item-main">
                        <div className="mengang-item-title">进矿车数</div>
                        <div className="mengang-item-value">
                            {countlist?.entryCars}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="item-jpg png1">

                    </div>
                </div>
                <div className="mengang-item">
                    <div className="item-main">
                        <div className="mengang-item-title">出矿车数</div>
                        <div className="mengang-item-value">
                            {countlist?.outputCars}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="item-jpg png2">

                    </div>
                </div>
                <div className="mengang-item">
                    <div className="item-main">
                        <div className="mengang-item-title">矿内车数</div>
                        <div className="mengang-item-value">
                            {countlist?.insideCars}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="item-jpg png3">

                    </div>
                </div>
            </div>
        </div>
    )
}

export default MengangData